<template>
    <div class="cont" @click="hanclick">
      <div class="wrapper">
           <swiper :options="swiperOption"  >
            <!-- slides -->
            <!-- <swiper-slide v-for="(item,index) in imgs" :key="index">
                <img class="cont-img" 
                :src="item" />        
            </swiper-slide> -->

            <swiper-slide >
                <img class="cont-img" 
                src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg" />        
            </swiper-slide>
             <swiper-slide >
                <img class="cont-img" 
                src="http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg" />        
            </swiper-slide>

            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>  
    </div>
</template>

<script>
export default {
    name:'detail',
    props:{
        imgs:{
            type:Array,
            default(){
                // return ['http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_800x800_70debc93.jpg']
                return []
            }
        }
    },
    data(){
        return{
           swiperOption:{
               pagination : '.swiper-pagination',
               paginationType : 'fraction',
               observer:true,
               observeParents:true
           }
        }
    },
    methods: {
        hanclick(){
            this.$emit('clos')
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .cont >>> .swiper-container
        overflow inherit 
    .cont
        display flex
        flex-direction column
        justify-content center
        position  fixed
        left 0
        right 0
        top 0
        bottom 0
        background #000
        z-index 99
        // .wrapper
        //     height 0
        //     width 100%
        //     padding-bottom 100%
            // .swiper-container
            //     display flex
            //     flex-direction column
            //     justify-content center
            .cont-img
                    width 100%
            .swiper-pagination
                    color  #ffffff
                    bottom -1rem













</style>

